import React, { Component } from 'react'
import {HeaderCategory} from './styledCategory'
import {withRouter}  from 'react-router-dom'
 class Header extends Component {
  state={
    dir:'category'
  }
  handler=dir=>{
    return ()=>{
      console.log(dir)
      this.setState({
        dir
      })
      this.props.history.push(`/${dir}`)
    }
  }
  render() {
    return (
      <HeaderCategory>
        <ul>
          <li onClick={this.handler('category')} className={this.state.dir==='category'?'active':''}>分类</li>
          <li onClick={this.handler('material')} className={this.state.dir==='material'?'active':''}>食材</li>
          <li className={`slider ${this.state.dir =='material'?'right':''}`}></li>
        </ul>
      </HeaderCategory>
    )
  }
}
export default withRouter(Header)